//获取使用到的标签
var bg = document.getElementById("bg")
var header = document.querySelector('header')
var h4 = document.querySelector('h4')
var section = document.querySelector('section')
var audio = document.querySelector('audio')

var leftTimeSpan = document.querySelector('#time>span:nth-child(1)')
var rightTimeSpan = document.querySelector('#time>span:nth-child(3)')
var timeSilder = document.querySelector('#time>input')

var prevBtn = document.getElementById("prev")
var playBtn = document.getElementById("play")
var nextBtn = document.getElementById("next")

var volumeSilder = document.querySelector('#volume>input')

var ul = document.querySelector('aside>ul')

var aside = document.querySelector("aside")

var cover = document.getElementById("cover")

//创建音乐播放列表（数据列表）
var list = [
	{
		name:'传奇',
		singer:"王菲",
		src:'mp3/传奇.mp3',
		cover:'img/wf.png'
	},{
		name:'知道不知道',
		singer:"刘若英",
		src:'mp3/知道不知道.mp3',
		cover:'img/lry.jpg'
	}
]

//定义变量，表示当前将要播放的音乐在列表中的索引
var current = 0 ;

//定义变量，表示当前是否正在滑动滑动条
var isDraging = false ;

//定义变量，表示当前是否在做动画
var isAnimate = false ;



start()
//播放音乐的方法
function start(){
	if (isAnimate) {
		return;
	}else{
		
	}
	//从音乐数据列表中获取第一首音乐
	var song = list[current]
	//设置背景图片
	bg.style.backgroundImage = 'url(' + song.cover +')'
	//设置歌曲名
	header.innerHTML = song.name;
	//设置歌手名
	h4.innerHTML = song.singer 
	//设置播放音乐
	audio.src = song.src 
	audio.play()
	//歌手头像设置
	//判断是否设置过歌手头像（只判断js中的设置，不判断css中的设置）
	if(section.style.backgroundImage){
		//即使css中设置了backgroundImage,在这里判断的结果仍然是false
		//如果已经设置，说明是要切换音乐
		changeImage();
	}else{
		//如果没有设置，说明是第一次打开页面
		section.style.backgroundImage = 'url(' + song.cover +')'
	}
	
	
//	section.style.backgroundImage = 'url(' + song.cover +')'
//	section.style.animation = 'flyOut 1s'
}
//头像切换的动画 效果实现的方法
function changeImage (){
	//旧的头像飞出去
	section.style.animation = 'flyOut 1s forwards'
	//创建新的头像
	var newSection = document.createElement('section')
	newSection.style.zIndex = 5 ;
	//设置新的头像图片
	//获取当前将要播放的音乐
	var song = list[current]
	newSection.style.backgroundImage = 'url(' + song.cover +')'
	//把新的section头像添加到父元素cover中
	cover.appendChild(newSection)
	
	//当头像飞出的动画结束之后，移除之前的section
	setTimeout(function(){
		//移除之前的section
		section.remove();
		//对section这个变量重新赋值
		section = newSection;
		section.style.zIndex = 50 ;
		//动画结束
		isAnimate = false ;
	},1000)
}



//进度控制
audio.ontimeupdate = function(){
	
	//在滑动条没有拖拽时，更新进度
	if(!isDraging){
		//左侧显示当前的时间
		leftTimeSpan.innerHTML = format(audio.currentTime);
		//右侧显示总时间
		rightTimeSpan.innerHTML = format(audio.duration);
		
		//设置滑动条的最大值  等于音乐的总时间
		timeSilder.max = audio.duration;
		//滑动条的当前值 可以表示音乐的当前时间
		timeSilder.value = audio.currentTime ;
	}
}

//转化时间  显示格式的方法
function format(time){
	//把时间参数取整
	var t = Math.floor(time || 0)
	//计算分钟数
	var mint = Math.floor(t / 60)
	//计算秒数
	var sect = t % 60
	//保留两位整数
	mint = mint < 10 ? '0' + mint : mint
	sect = sect < 10 ? '0' + sect : sect
	return mint + ":" + sect
}

//当鼠标在滑动条上点下去时，开始拖拽
timeSilder.onmousedown = function (){
	isDraging = true ;
	
	//鼠标点下，并且移动
	timeSilder.onmousemove = function (){
		leftTimeSpan.innerHTML = format(timeSilder.value)
		
	}
}
//当鼠标抬起时，结束拖拽
timeSilder.onmouseup = function (){
	//让时间和进度继续更新
	isDraging = false ;
	//更改音乐的进度
	audio.currentTime = timeSilder.value ;
}

//播放控制
//开始 和 暂停
playBtn.onclick = function (){
	//判断当前的播放状态
	if(audio.paused){
		audio.play() ; //如果是暂停状态就开始播放
	}else{
		audio.pause() ; //如果在播放就暂停
	}
}

audio.onplaying = function (){
	playBtn.src = 'img/play.png'
	section.style.animationPlayState = 'running'
}
audio.onpause = function (){
	playBtn.src = 'img/pause.png'
	section.style.animationPlayState = 'paused'
}

//上一首
prevBtn.onclick = function (){
	if(current > 0){current -- }
	else{current = list.length - 1}
	start()
}
//下一首
function nextSong(){
	if(current < list.length - 1){current ++ }
	else{current = 0}
	start()
}
nextBtn.onclick = nextSong

audio.onended = nextSong

//音量控制
//volumeSilder.onmousedown = function (){
//	volumeSilder.onmousemove = function (){
//		//设置音量
//		//audio.volume 音量范围是[0-1]
//		//volumeSilder.value 值的范围是[0-100]
//		audio.volume = volumeSilder.value / 100 ;
//	}
//}

//也可以使用以下方法控制音量
//当滑动条的value值改变时 触发事件
volumeSilder.oninput = function (){
//	console.log(this.value);
	audio.volume = this.value / 100 ;
}

//获取播放列表，并显示
for(var i = 0 ; i < list.length ; i ++){
	var song = list[i];
	var li = document.createElement('li')
	li.innerHTML = song.name + ' <small>- - ' + song.singer + '</small>' ;
	ul.appendChild(li)
	
	li.dataset.index = i ;
	//当点击了这个li标签时，播放对应的音乐
	li.onclick = function (){
		//获取这个li标签对应的音乐索引
		current = this.dataset.index;
		start() //播放音乐
		closed()  //隐藏播放列表
	}
}

//点击歌手头像  弹出音乐列表
cover.onclick = function (){
	aside.style.animation = 'flyUp 0.5s forwards'
}
function closed (){
	aside.style.animation = 'flyDown 0.5s forwards'
}